import { Component } from '@angular/core';
import { CommonTable } from '../shared/common-table.class';
import { ProductService } from '../service/product.service';



@Component({
  template: `
    <nz-table #nzTable
      [nzAjaxData]="_dataSet"
      [nzLoading]="_loading"
      [nzTotal]="_total"
      [(nzPageIndex)]="_current"
      (nzPageIndexChange)="refreshData()"
      [(nzPageSize)]="_pageSize">
      <thead nz-thead>
        <tr>
          <th nz-th><span>id</span></th>
          <th nz-th><span>name</span></th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td>
           {{data.id}} 
          </td>
          <td nz-td>
           {{data.name}} 
          </td>
        </tr>
      </tbody>
    </nz-table>
  `,
  providers: [ProductService]
})
export class ProductComponent extends CommonTable {

  constructor(private productService: ProductService) { super() }

  refreshData() {
    this._loading = true;
    this.productService.getUsers(this._pageSize, this._current).then(data => {
      this._loading = false;
      this._total = data.total;
      this._dataSet = data.dataList;
    })
  }
}